﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script language="javascript" type="text/javascript" src="../scripts/jquery/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/plugins/headjs/head.min.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/plugins/wookmark/jquery.wookmark.js"></script>
    <title></title>
	<script type="text/javascript">
		$(document).ready(function(){
			<?php
			$xml = simplexml_load_file("../data/photoalbums.xml");
			?>

			var albumDir = '../images/albums/';
			var albums = <?php echo json_encode($xml); ?> 
			var albumContainer = $("#album-container");
			var albumsPageTitle = $("#albums-page-title");
			var photoAlbumContent = $("#photo-album-content");
			var backToAlbum = $("#lbl-back-to-album");
			var photosContainer = $("#photos-container");
			var lblAlbumTitle = $("#lbl-album-title");
			if(typeof albums != "undefined"){
				var albumArr = albums.album;
				var htmlThumbsStr;
				
				for(i=0; i<albumArr.length;i++){
					htmlThumbsStr = '';
					htmlThumbsStr += '<div class="float-left" style="padding-left:32px; padding-bottom:32px;">';
					htmlThumbsStr += '<div class="album-thumbs" albumName="'+ albumArr[i].name + '" photoCount="' + albumArr[i].count +'" albumDir="'+ albumArr[i].directory +'"'; 
					htmlThumbsStr += '" class="float-left" style="background-repeat:no-repeat;background-image:url('+ albumDir + albumArr[i].directory + '/' + albumArr[i].coverphoto + '.png)">';
					htmlThumbsStr += '<div style="padding-top:124px;"><div class="album-title" id="album-title-'+  albumArr[i].directory +'">'+ albumArr[i].name +'</div></div></div></div>';
					albumContainer.append(htmlThumbsStr).hide().fadeIn(700);
				}
				albumContainer.append('<div class="clear-both"></div>');
				
			}
			
			var albumThumbs = $(".album-thumbs");
					
			albumThumbs
				.on("mouseover",function(){
					$("#album-title-" + $(this).attr('albumdir')).fadeIn(550);
				})
				.on("mouseleave", function(){
					$("#album-title-" + $(this).attr('albumdir')).fadeOut(550);
				})
				.on("click", function(){
					lblAlbumTitle.hide();
					photosContainer.html("");
					lblAlbumTitle.html("");
					
					
					albumContainer.fadeOut(400);
					albumsPageTitle.fadeOut(400);
					photoAlbumContent.hide();
					photoAlbumContent.fadeIn(400);
					
					var strPhotos;
					var photoCount = $(this).attr('photoCount');	
					var albumDir =  $(this).attr('albumDir');
					var albumName =  $(this).attr('albumName');				
					lblAlbumTitle.html(albumName);
					strPhotos = '<ul id="photo-tiles" style="position:relative !important;list-style-type: none;">';
					for(j=1;j<photoCount;j++){
						var fileName = j+".jpg";
						var img = new Image();
						var oHeight;
						var oWidth;
						var fWidth = 350;
							
						if((j+"").length == 1){
							fileName = "0" + j + ".jpg"
						}
						
						img.src = '../images/albums/'+ albumDir +'/'+ fileName;
						oHeight = img.height;
						oWidth = img.width;
						nHeight = ((oHeight * fWidth) / oWidth);
						
						strPhotos += '<li><img src="../images/albums/'+ albumDir +'/'+ fileName +'" width="'+ fWidth +'" height="'+ nHeight  +'"/></li>';
					}
					strPhotos += '</ul><div class="clear-both"></div>';
					photosContainer.append(strPhotos).hide();
					lblAlbumTitle.fadeIn(800);
					setTimeout(function(){
						photosContainer.show();
						$("#photo-tiles li").wookmark({
							autoResize: true,
							container: $('#photo-tiles'),
							offset: 4,
							itemWidth: 355
						})
						photosContainer.hide();
						
						photosContainer.fadeIn(1200)
						
					},1000);
					
					
					
					
				});
			backToAlbum.on("click", function(){
				albumContainer.fadeIn(400);
				albumsPageTitle.fadeIn(400);
				photoAlbumContent.fadeOut(400);
			});
		});
    </script>
</head>
<body>
	<div class="page-title" id="albums-page-title">Albums</div>
    <div id="album-container">
    </div>
    <div id="photo-album-content" style="display:none;">
    	<div id="lbl-back-to-album" class="lbl-back-to-album" style="cursor: pointer">back to Albums...</div>
        <div id="lbl-album-title" class="page-title"></div>
        <div id="photos-container" style="padding-left:45px;"></div>
    </div>    
</body>
</html>
